15085
19423 
Jestem absolutnie początkującym, uczę się przez dwa tygodnie, przygotowując się do bootcampu za miesiąc. Chcąc podnieść swoje umiejętności i „nauczyć się myśleć jak programista”, podjąłem się projektu, który ma na celu rozwiązanie rzeczywistego problemu.
Moja żona prowadzi firmę wymagającą od niej wystawiania faktur dla swoich klientów. Próbuję użyć HTML i JavaScript, aby zbudować aplikację internetową, która umożliwia jej szybkie tworzenie niestandardowych faktur, zamiast sporządzać je ręcznie za każdym razem.
W aktualnej wersji monit prosi ją o podanie numeru. Ta liczba generuje taką samą liczbę wierszy z trzema kolumnami w HTML. Dzięki temu może dostosować fakturę do dokładnej liczby potrzebnych pól.
Kolumna 1 zawiera nazwę produktu. W tym samym wierszu kolumna 2 zawiera liczbę jednostek, natomiast kolumna 3 zawiera całkowity koszt tego produktu, czyli cenę bazową pomnożoną przez liczbę jednostek. Chcę, aby to obliczenie było wykonywane po kliknięciu przycisku. Ale utknąłem.
Aby wykonać obliczenia, muszę być w stanie pobrać liczby całkowite z każdego wiersza i kolumny i przekazać je do funkcji. Ale ponieważ każdy wiersz i kolumna został wygenerowany automatycznie, nie mają one unikalnych atrybutów i nie można ich w ten sposób zidentyfikować. Jestem w stanie wykonać obliczenia w każdej kolumnie, ale nie w każdym wierszu.
Ponieważ jestem nowy, ponieważ nauczyłem się tylko z kilku kursów wprowadzających w Codecademy i kilku filmów na YouTube, nie wiem, jak ocenić, czy podchodzę do projektu całkowicie źle, czy też brakuje mi jakiejś sztuczki jeśli jest coś, czego jeszcze się nie nauczyłeś. Gdyby ktoś z pewnym doświadczeniem mógł popchnąć mnie we właściwym kierunku, naprawdę bym to docenił!
Dołączyłem cały kod do tego posta. Przepraszam, jeśli to okropny bałagan. Spokojnie, jestem początkującym!
const invDate = Date ();
var field = " " +
„ " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
let invoicedName = prompt ('Dla kogo została wystawiona ta faktura?', 'Wpisz nazwę');
let productFields = Number (prompt ('Ile nazw produktów na tej fakturze?', 'Wprowadź liczbę'));
niech pola = ''
niech dynHtml = ''
if (invoicedName! = null && productFields! = null) {
for (niech i = 1; i <= productFields; i ++) {
pola + = pole};
} else {alert ('Proszę podać prawidłowe dane wejściowe.');
};
dynHtml = "
  
 
" +
„
 FAKTURA 
” +
„
 Przygotowano na: „ + invoicedName + ”, w dniu„ +
"
" + invDate + "
 
 
" +
pola + „
 
” +
" 
";
document.write (dynHtml);
document.getElementById ('oblicz'). onclick = function getQtyFields () {
let qtyInputs = document.getElementsByName ('qty'),
resultQty = 0;
for (niech j = 0; j
2020-12-15 08:12:51 
Jak powiedziałeś, Twoim głównym problemem jest znalezienie sposobu na nadanie każdemu polu wejściowemu w osobnym wierszu własnego unikatowego identyfikatora. W ten sposób możesz obliczyć cenę dla każdego wiersza i wstawić ją w pole ceny.
Najpierw musisz zacząć od pól:
var field = " " +
„ " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
...
for (niech i = 1; i <= productFields; i ++) {
pola + = pole};
...
};
Każda grupa potrzebuje własnego identyfikatora. W ten sposób możesz później odwołać się do każdego wejścia w każdym wierszu, aby obliczyć cenę cząstkową. Atrybut class to coś, co możesz przypisać do wielu elementów, aby później odwołać się do nich. Ta klasa może być dowolna, o ile nie powoduje konfliktu z klasą dla żadnego innego wiersza. Możesz użyć i pętli jako swojego identyfikatora, ponieważ zmienia się on z każdą pętlą.
for (niech i = 1; i <= productFields; i ++) {
var field = " " +
„ " +
"  
 
";
pola + = pole
};
Spowoduje to dodanie klasy row- {i} do każdego pola w każdym wierszu. Jeszcze lepiej, możesz zmienić to na własną funkcję
function generationFields (i) {
return " " +
„ " +
"  
 
";
}
for (niech i = 1; i <= productFields; i ++) {
pola + = generujFields (i);
};
Otrzymasz coś podobnego do następującego kodu HTML
 
 
  
 

 
 
  
 

 
 
  
 

Teraz w swojej funkcji obliczeniowej możesz odwołać się do tych wierszy i obliczyć ich cenę. Tutaj możesz przejrzeć pola wejściowe „item”.
document.getElementById ('oblicz'). onclick = function getQtyFields () {
let itemInputs = document.getElementsByName ('item')
for (niech i = 0; i )
for (niech i = 0; i